<template>
  <div class="home">
      <!-- <el-button type="primary" @click="fun_go_back">后退</el-button> -->

    <el-container class="big_container">
        <el-header class="header">
            <img src="../assets/gg.png" alt="">
            <span>电商后台管理系统</span>
            <el-button class="go_back_btn" type="primary" @click="fun_go_back">退出登录</el-button>
        </el-header>
        <el-container>
            <el-aside class="aside" :width="is_zhedie==true? '64px' : '200px' ">
                <!-- 折叠盒子按钮 -->
                <div class="zhe_die_box" @click="fun_togg_zhedie">|||</div>
                <!-- 侧边导航开始 -->
                <el-menu
                    class="el_menu"
                    background-color="#313743"
                    text-color="#fff"
                    unique-opened
                    :collapse="is_zhedie"
                    :collapse-transition="false"
                    router
                    :default-active='active_path'
                    active-text-color="#ffd04b">
                    <el-submenu :index="itme.id + ''" :key="itme.id" v-for="(itme) in ce_nav_itmes_data">
                        <template slot="title">
                            <i :class="icon_data[itme.id]"></i>
                            <span>{{itme.authName}}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item @click="fun_set_active('/' + chilren_itme.path)" :key="chilren_itme.id" v-for="(chilren_itme) in itme.children" :index="'/' + chilren_itme.path">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>{{chilren_itme.authName}}</span>
                                </template>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main class="main">
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>

  </div>
</template>

<script>
    export default {
        name: 'Home',
        data () {
            return {
                ce_nav_itmes_data: [
                ],
                icon_data: {
                    '125':'iconfont icon-user',
                    '103':'iconfont icon-showpassword',
                    '101':'iconfont icon-shangpin',
                    '102':'iconfont icon-danju',
                    '145':'iconfont icon-baobiao'
                },
                is_zhedie: false,
                active_path: '' 
            }
        },
        methods: {
            fun_go_back() {
                window.sessionStorage.clear();
                this.$router.push('/login');
            },
            async get_ce_nav_data() {
                const { data: ce_nav_data } = await this.$axios.get('/menus');
                this.ce_nav_itmes_data = ce_nav_data.data;
            },
            fun_togg_zhedie() {
                this.is_zhedie = !this.is_zhedie;
            },
            fun_set_active(my_path) {
                window.sessionStorage.setItem('active_path',my_path );
                this.active_path = window.sessionStorage.getItem('active_path');
            }
        },  
        mounted() {
            this.get_ce_nav_data();
            this.active_path = window.sessionStorage.getItem('active_path');
        }
    }
</script>

<style lang="css" scoped>
.header {
    position: relative;
    background-color: #363d40;
    padding-left: 0px;
}
.header img {
    height: 90%;
    vertical-align: middle;
}
.header span {
    color: #fff;
    font-size: 20px;
    line-height: 60px;
    margin-left: 20px;
} 
.aside {
    background-color: #313743;
}
.main {
    background-color: #e9edf1;
}
.home {
    width: 100%;
    height: 100%;
}
.big_container {
    height: 100%;
}
.go_back_btn {
    position: absolute;
    top: 10px;
    right: 20px;
}
.el_menu {
    border-right: 0px;
}
.el-submenu span {
    margin-left: 5px;
}
.el-icon-menu {
    margin-right: 0px !important;
}
.zhe_die_box {
    width: 100%;
    height: 30px;
    background-color: #4a5264 !important;
    z-index: 50;
    text-align: center;
    line-height: 30px;
    color: #fff;
    font-size: 20px;
    padding-bottom: 2px;
    cursor: pointer;
}
</style>